<template>

            <el-row type="flex"   justify="start" style="   ">
                <el-col v-for="item,index in paramsArray" :span="6" style="padding:10px">
                     <el-row >
                        <el-col :span="6">
                            <el-select
                                v-model="item.propId"
                                placeholder="Select"
                                size="small"
                                style="width: 100%"
                                @change="propertyChange(index)"
                                >
                                <el-option
                                    v-for="item in propertyArray"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                                </el-select>
                        </el-col>
                         <el-col :span="5">
       
                            <el-select
                                v-model="item.relation"
                                placeholder="Select"
                                size="small"
                                style="width: 100%"
                    
                                >
                                <el-option
                                    v-for="item1 in item.relationOptions"
                                    :key="item1"
                                    :label="item1"
                                    :value="item1"
                                />
                                </el-select>
          
                        </el-col>
                        <el-col :span="10">
                            <el-input size="small"  v-model="item.value" ></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="danger" size="small" :icon="Delete" circle  @click="removeParam(index)"/>
                        </el-col>
                
                    </el-row>
                </el-col>


                <el-col :span="6" style="padding:10px">
                    <el-button type="success" size="small"  circle style="font-size: large;" @click="addParam">+</el-button>
                    <el-button size="small" type="primary"  @click="search">搜索</el-button>
                    <el-button size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import {
    CirclePlus,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    } from '@element-plus/icons-vue'
import { time } from 'console';
import { ElMessage } from 'element-plus';

    export interface SelectProperty {
        label: string;
        value: string;
        type:string;  //参数类型，根据不同类型显示不同的relation
    }
    export interface SearchParam {
        propId: string;
        propName: string;
        value:string;
        relation?:string;
        relationOptions?:Array<string>;
    }

    const props = defineProps({
        defaultParams: {
            type: Array<SearchParam>,
            required: true
        },
        defaultProperty:{
            type:Array<SelectProperty>,
            required:true
        }
    })

    

    // 声明可触发的事件
    const emit = defineEmits(['submit']);

    const propertyArray = ref<SelectProperty[]>([])
    const paramsArray = ref<SearchParam[]>([])
    // const relationArray = ['包含','不包含','大于','小于','等于']
    reset()

    function addParam() {
        paramsArray.value.push(
            { 
                propId: propertyArray.value[0].value, 
                propName: propertyArray.value[0].label ,
                value:'',
                relation:'',
                relationOptions:[]
            }
        )

        addRelationOption(paramsArray.value[paramsArray.value.length -1])
    }

    function propertyChange(index:number){
        console.log("属性变化",index)
        addRelationOption(paramsArray.value[index])
    }

    function removeParam(index:number){
        paramsArray.value.splice(index,1)
    }

    function search(){
        emit('submit', paramsArray.value);
    }

    function reset(){
         ElMessage.info("重置检索条件")
        if(props.defaultProperty){
            propertyArray.value= []
            propertyArray.value = JSON.parse(JSON.stringify(props.defaultProperty))
        }

        if(props.defaultParams){
            ElMessage.info("有默认检索条件"+JSON.stringify(props.defaultParams))
     
            paramsArray.value = JSON.parse(JSON.stringify(props.defaultParams))
            paramsArray.value.forEach(item=>{
                addRelationOption(item)
            })
        }
        else{
            ElMessage.info("没有默认检索条件")
            paramsArray.value = []
            addParam()
        }
        
    }

    function addRelationOption(param:SearchParam){
        if(param.propId==''){
            param.propId = propertyArray.value[0].value
            param.propName = propertyArray.value[0].label
        }

        propertyArray.value.forEach(item=>{
            if(item.value == param.propId){
                let relationOptions = ['包含','不包含']
                let relation = "包含"
                if(item.type == "number"){
                    relationOptions = ['=','>','<','>=','<=']
                    relation = "="
                }

                param.relation=relation
                param.relationOptions = relationOptions
            }
        })
    }

  

</script>

<style lang="scss" scoped></style>
